<template>
  <div class="detail">
    <div class="detail-one">
      <p>{{list.name}}直播间</p>
      <p>春季美妆搭配</p>
      <p></p>
    </div>
    <div class="detail-two">
      <span>
        <p>当前观看人数：134人</p>
        <p>当前关注人数：133人</p>
        <p>当前点赞人数：54人</p>
        <p>当前下单人数：12人</p>
      </span>
      <span>
        <img :src="list.img" alt="">
        <p>
          <button @click="gohome">返回</button>
          <button>强制关闭</button>
        </p>
      </span>
      <span></span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
    };
  },
  created() {
    this.getlist();
  },
  methods: {
    getlist() {
      this.$http.post("/api/getVadio").then((res) => {
        const {
          params: { id },
        } = this.$route;
        const result = res.data.data.find((item) => item.id == id);
        this.list = result;
        console.log(this.list);
      });
    },

    gohome(){
      this.$router.push('/Live')
    }
  },
};
</script>

<style>
.detail{
  width: 100%;
  height: 100%;
  background: black;
}
.detail-one{
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0,0,0,.5);
  box-shadow: 2px 2px 4px 3px #ccc;
  color: #fff;
}
.detail-two{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  margin: 8px 0;
}
.detail-two span{
  width: calc(100%/3);
}
.detail-two span:nth-child(1){
  line-height: 80px;
  color: skyblue;
}
.detail-two span:nth-child(2) p{
  margin: 0 30px;
  width: 100%;
  display: flex;
  justify-content: space-between; 
}
.detail-two span:nth-child(2) p button:nth-child(1){
  border: none;
  padding: 6px 40px;
  margin: 5px 8px;
  background: orangered;
  color: #fff;
}
.detail-two span:nth-child(2) p button:nth-child(2){
  border: none;
  padding: 6px 30px;
  border: 1px solid orangered;
  color: #fff;
  background: black;
}
</style>